<template>
  <div id="tab">
    <mu-drawer class="drawer" :open="open" :docked="docked" @close="toggle()">

      <div class="drawer-pic" style="background:#474a4f; padding: 70px 0;text-align:center; color:#fff;">
        <div class="title" style="font-size: 32px">
          时鸣网络
        </div>
        <div class="description" style="font-size: 16px;color:#e0e0e0;">
          豆瓣WEB应用
        </div>
      </div>

      <mu-list value="movie" @itemClick="docked ? '' : toggle()" @change="page">

        <mu-list-item value="movie" title="电影">
          <mu-icon slot="left" value="movie"/>
        </mu-list-item>

        <mu-list-item value="book" title="图书">
          <mu-icon slot="left" value="book"/>
        </mu-list-item>

        <mu-list-item value="music" title="音乐">
          <mu-icon slot="left" value="music_note"/>
        </mu-list-item>

        <!--分割线-->
        <mu-divider shallowInset/>
        <mu-list-item value="about" title="关于">
          <mu-icon slot="left" value="info"/>
        </mu-list-item>
      </mu-list>
    </mu-drawer>
    <mu-paper :zDepth="2">
      <mu-appbar title='电影'>
        <mu-icon-button icon="menu" slot="left" v-on:click="toggle(true)" />
        <mu-icon-button icon="search" slot="right" v-on:click="goToSearch()" />
      </mu-appbar>
      <mu-tabs :value="activeTab" @change="handleTabChange">
        <mu-tab value="in_theaters" title="正在热映"/>
        <mu-tab value="coming_soon" title="即将上映" />
      </mu-tabs>
    </mu-paper>

    <div v-if="activeTab === 'in_theaters'">
      <Card tab-name='in_theaters' :change-tab=changeTab v-on:change-tab="changeTabMethods"></Card>
    </div>
    <div v-if="activeTab === 'coming_soon'">
      <Card tab-name="coming_soon" :change-tab=changeTab></Card>
    </div>
  </div>
</template>
<script type="text/javascript">
// 在单独构建的版本中辅助函数为 Vuex.mapState
  import { mapState, mapGetters } from 'vuex'
  import Card from '@/views/movies/Card'
  import * as type from '@/store/movies/type.js'

  export default {
    name: 'tab',
    data() {
      return {
        dialog: false,
        open: false,
        docked: true,
        value: 'movie',
        changeTab: false
      }
    },
    components: {
      Card
    },
    created(){
      // console.log(activeTab)
    },
    // 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
    // mapState 辅助函数
    /**
    当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
    */
    computed: {
      ... mapGetters({
        // activeTab: state => [console.log(state.MovieModule.getShowTab)]
      }),
      ... mapState({
        // 箭头函数可使代码更简练
        // 这里的 MovieModule 在 store.js 中定义, movies 是在/movies/module.js 中定义
        activeTab: state => state.MovieModule.movies.tab, //state.movies.tab
        isLoading: state => state.MovieModule.movies.isLoading // state.movies.isLoading
      })
    },
    methods: {
      page(val) {
        if( val === 'about'){
          this.$router.push({name: 'About'})
        }
      },
      changeTabMethods(){
        this.changeTab = false
      },
      openDia() {
        this.dialog = true
      },
      closeDia() {
        this.dialog = false
      },
      toggle(flag){
        this.open   = !this.open
        this.docked = !flag
      },
      handleTabChange(val){
        /*Action 通过 store.dispatch 方法触发：*/
        this.$store.dispatch(type.CHANGE_MOVIES_TAB, val)
        this.changeTab = true
      },
      goToSearch(){
        this.$router.push({name: 'MovieSearch'})
      }

    }
  }
</script>
<style lang="css">
#tab{
	width:100%;
	height: 100%;
}
.drawer{
	    color: #212121;
    background:#f5f5f5;
}
.loading{
  padding: 100px 0;
}
</style>
